<template>
  <div class="branchIncome">
	   <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
       <div class="heading">收入分析：<span class="redTitle">{{nextLvlName}}收入完成情况 </span></div>
       <div class="content">
         <div class="contentLeft">
           <div class="growthRate">
             <div class="marg"><span class="weightFont"><span class="lingxing"></span>主营收入预算完成率：</span><span class="normalFont">{{currentLvlName}} {{mainAnalysis.currentCompleteBudget}}%</span></div>
             <div class="marg"><span class="normalFont sign">年度预算完成率前三：</span><span class="normalBuleFont">{{mainAnalysis.topThreeAreaNames}}</span></div>
             <div class="marg"><span class="normalFont sign">年度预算完成率后三：</span><span class="normalRedFont">{{mainAnalysis.downThreeAreaNames}}</span></div>
             <!-- <div class="marg"><span class="weightRedlFont sign">{{mainAnalysis.gapOfBudgetLjAreaNames}}</span><span class="normalFont">月累计收入预算均存在缺口</span></div> -->
           </div>
           <div class="growthRate">
             <div class="marg"><span class="weightFont"><span class="lingxing"></span>基本面收入完成率：</span><span class="normalFont">{{currentLvlName}} {{basicAnalysis.currentCompleteBudget}}%</span></div>
             <div class="marg"><span class="normalFont sign">年度预算完成率前三：</span><span class="normalBuleFont">{{basicAnalysis.topThreeAreaNames}}</span></div>
                          <div class="marg"><span class="normalFont sign">年度预算完成率后三：</span><span class="normalRedFont">{{basicAnalysis.downThreeAreaNames}}</span></div>
           </div>
           <div class="growthRate">
             <div class="marg"><span class="weightFont"><span class="lingxing"></span>DICT收入完成率：</span><span class="normalFont">{{currentLvlName}} {{idctAnalysis.currentCompleteBudget}}%</span></div>
             <div class="marg"><span class="normalFont sign">年度预算完成率前三：</span><span class="normalBuleFont">{{idctAnalysis.topThreeAreaNames}}</span></div>
             <div class="marg"><span class="normalFont sign">年度预算完成率后三：</span><span class="normalRedFont">{{idctAnalysis.downThreeAreaNames}}</span></div>
           </div>
          <div class="growthRate">
             <div class="marg"><span class="weightFont"><span class="lingxing"></span>码号级收入完成率：</span><span class="normalFont">{{currentLvlName}} {{numberAnalysis.currentCompleteBudget}}%</span></div>
             <div class="marg"><span class="normalFont sign">年度预算完成率前三：</span><span class="normalBuleFont">{{numberAnalysis.topThreeAreaNames}}</span></div>
             <div class="marg"><span class="normalFont sign">年度预算完成率后三：</span><span class="normalRedFont">{{numberAnalysis.downThreeAreaNames}}</span></div>
           </div>
         </div>
         <div class="contentRight">
           <div class="topEchart">
             <div class="contentTitle">{{mainAnalysis.acctMonth}}月份{{nextLvlName}}<span class="redTitle">主营收入和基本面收入</span>预算完成率</div>
             <basicIncome :mainAndbasic='mainAndbasic'></basicIncome>
             <div>

             <div class="lackData">
                <span class="title">预算缺口:</span>
                <ul class="gapOfTitle" ref="budgetLjList">
                  <li v-for="(item,index) in gapOfBudgetLjList" :key="index" :style="{'width':widthChange+'px'}">{{item}}</li>
                </ul>
             </div>
           </div>
           </div>
           <div class="centerEchart">
             <div class="contentTitle">{{idctAnalysis.acctMonth}}月份{{nextLvlName}}<span class="redTitle">DICT收入</span>预算完成率</div>
             <dictIncome :idctEchart="idctEchart"></dictIncome>
           </div>
           <div class="bottomEchart">
             <div class="contentTitle">{{numberAnalysis.acctMonth}}月份{{nextLvlName}}<span class="redTitle">码号级收入</span>预算完成率</div>
             <codeIncome :numberEchart="numberEchart"></codeIncome>
           </div>
         </div>
         <div class="contentBottom"><span class="normal">注：</span><span class="blod">基本面收入：</span><span class="normal">主营收入-DICT收入；</span><span class="blod">DICT收入：</span><span class="normal">IDC收入+ICT收入；</span><span class="blod">码号级收入：</span><span class="normal">四大主量资产计费平台主量科目收入，含大单。</span></div>
       </div>
  </div>
</template>

<script>
  import basicIncome from "@/views/budget/showPdf/showEchart/basicIncome";
  import dictIncome from "@/views/budget/showPdf/showEchart/dictIncome";
  import codeIncome from "@/views/budget/showPdf/showEchart/codeIncome";
 import { $budgetAPI } from "@/api";
 import {getCookie} from "@/common/js/cookie"
    export default {
        name: "branchIncome",
        props: ["areaId", "month"],
        components:{
          basicIncome,
          dictIncome,
          codeIncome,
        },
        data(){
          return{
           number:10,
           currentLvlName:'',
           mainAnalysis:{},
           basicAnalysis:{},
           numberAnalysis:{},
           idctAnalysis:{},
           firstEchart:{},
           nextLvlName:"",
           mainAndbasic:{},
           gapOfBudgetLjList:[],
           numberEchart:{},
           idctEchart:{},
           widthChange:'',
          }
        },
        methods:{
        getCompanyIncomeComplete(){
          var that = this
         let token = getCookie('token');
          $budgetAPI.getCompanyIncomeComplete(
          {token:token,
          areaId:this.areaId,
          acctMonth:this.month},
          res => {
            if(res && res.code == 0 )
             that.currentLvlName=res.content.currentLvlName;
             that.nextLvlName=res.content.nextLvlName;
             that.mainAnalysis = res.content.mainAnalysis
             that.basicAnalysis = res.content.basicAnalysis
             that.numberAnalysis = res.content.numberAnalysis
             that.idctAnalysis = res.content.idctAnalysis
             that.gapOfBudgetLjList = res.content.mainAnalysis.gapOfBudgetLjList
             let obj = {
               mainAnalysis:{
                 xAxis: [],
                 yAxis: [],
               },
               basicAnalysis:{
                 xAxis: [],
                 yAxis: [],
               },
             };
             let obj1 = {
                 xAxis: [],
                 yAxis: [],
             };
             let obj2 = {
                 xAxis: [],
                 yAxis: [],
             };
           obj.mainAnalysis.xAxis = res.content.mainAnalysis.areaNames
           obj.mainAnalysis.yAxis = res.content.mainAnalysis.completeYearBudgetList
           obj.basicAnalysis.xAxis = res.content.basicAnalysis.areaNames
           obj.basicAnalysis.yAxis = res.content.basicAnalysis.completeYearBudgetList
           that.mainAndbasic = obj
           obj1.xAxis =res.content.numberAnalysis.areaNames
           obj1.yAxis =res.content.numberAnalysis.completeYearBudgetList
           that.numberEchart= obj1
           obj2.xAxis =res.content.idctAnalysis.areaNames
           obj2.yAxis =res.content.idctAnalysis.completeYearBudgetList
           that.idctEchart= obj2
           this.width()
          },
           err => {}
           )
        },
        width(){
          this.widthChange = (this.$refs.budgetLjList.clientWidth-1)/this.gapOfBudgetLjList.length;
        },
        },
    }
</script>

<style lang="scss" scoped>
.branchIncome{
   padding: 20px 20px 50px 20px;
   border:1px solid #dee5f3;
   border-radius:5px;
   margin-top: 20px;
   position:relative;
   .logoBg{
     position: absolute;
     right:20px;
     top:20px;
   }
   .heading{
     font-size: 22px;
     font-weight: 700;
     text-align: center;
     padding-bottom: 40px;
     .redTitle{
       color:#c00000;
     }
   }
   .content{
      display: flex;
      position: relative;
     .contentLeft{
      flex:3;
       // display: inline-block;
       .growthRate{
         margin-bottom: 40px;
         .marg{
           margin-bottom: 10px;
           .weightFont{
             font-size: 18px;
             font-weight: 700;
             .lingxing{
               width: 10px;
               height: 10px;
               background-color: #c00000;
               transform:rotate(45deg);
               -ms-transform:rotate(45deg); /* Internet Explorer */
               -moz-transform:rotate(45deg); /* Firefox */
               -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
                -o-transform:rotate(45deg); /* Opera */
                margin-right:7px;
                display:inline-block;
             }
           }
           .normalFont{
             font-size: 16px;
             &.sign{
               padding-left: 20px;
               display: inline;
               position: relative;
               &::before{
                  content: '-';
                  color: #333;
                  position: absolute;
                  left:0;
               }
             }

           }
           .normalBuleFont{
             font-size: 16px;
             color:#5585bf;
           }
           .normalRedFont{
             font-size: 16px;
             color:#c00000;
           }
           .weightRedlFont{
             font-size: 16px;
             color:#c00000;
             font-weight: 700;
             &.sign{
               padding-left: 20px;
               display: inline;
               position: relative;
               &::before{
                  content: '-';
                  color: #333;
                  font-weight: normal;
                  position: absolute;
                  left:0;
               }
             }
           }
         }
       }
     }
     .contentRight{
       flex:6;
       // display: inline-block;
       // float: right;
       // // height: 560px;

       .topEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 20px 0;
           display: inline-block;
            height: 38%;

           &:before{
             content:"";
             position:absolute;
             left:17%;
             top:-2px;
             width:66%;
             height:2px;
             background-color:#fff
           }
       }
       .centerEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 20px 0px 0px 0px;
           display: inline-block;
            height:27%;
           margin:3% 0;
           &:before{
             content:"";
             position:absolute;
             left:20%;
             top:-2px;
             width:60%;
             height:2px;
             background-color:#fff
           }
       }
       .bottomEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 20px 0 0px 0;
           display: inline-block;
            height:27%;
            margin-bottom: 1%;
           &:before{
             content:"";
             position:absolute;
             left:20%;
             top:-2px;
             width:60%;
             height:2px;
             background-color:#fff
           }
       }
       .contentTitle{
           position: absolute;
           left: 50%;
           top: -14px;
           transform: translateX(-50%);
           font-size: 18px;
           font-weight: 700;
           text-align: center;
           width:65%;
           .redTitle{
             color:#e46c11;
           }
        }
        .lackData{
           padding: 0 0px 0 55px;
          .title{
            width: 51px;
            display: inline-block;
            vertical-align: top;
            float: left;
            margin-left: -55px;
          }
          .gapOfTitle{
             display: inline-block;
              width: 100%;
               li{
                 float:left;
                 border:1px solid #5585bf;
                 color:#5585bf;
                 text-align: center;
                 height: 18px;
                 line-height: 18px;
               }
               // li:nth-child(1){
               //   width:60px !important;
               // }

          }

        }
     }
     .contentBottom{
       margin-top:20px;
       position: absolute;
       bottom:-30px;
       .normal{
         font-size: 14px;
       }
       .blod{
         font-size: 14px;
         font-weight: 700;
       }
     }
   }
}
</style>
